<template>
    <div class="control-flex">
        <!-- 机械监控 -->
        <machine @watch="handleWatchDirective" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS')" ref="machine" style="width:15%" :top="top"></machine>
        <!-- 预警信息,作业进度,堆场统计,坏箱 -->
        <div class="control-flex control-warp" style="width:85%">
            <!-- 预警信息 -->
            <div class="control-flex control-bettwen" style="align-items: center;">
                <!--<span class="title-line" :style="power('WJOB_CONTROL_CONTAINER_WARNING')?'':'visibility:hidden'">-->
                    <!--预警信息-->
                <!--</span>-->
                <div class="notice-alert" style="width: 70%" v-if="power('WJOB_CONTROL_CONTAINER_WARNING')">
                    <transition-group name="list" tag="ul">
                        <li v-for="(item,index) in notice" class="notice-list" v-if="index<1">
                            <el-alert :title="item.title" type="warning" style="color:#ff2400;cursor:pointer;" class="alert-width" show-icon :closable="false"></el-alert>
                            <!-- <el-alert :title="item.title" type="warning" style="color:#ff2400;cursor:pointer;" @click.native="getWarnInfoList" class="alert-width" show-icon :closable="false"></el-alert> -->
                        </li>
                    </transition-group>
                    <mqtt ref="msg" destination="USERS/wzjzx/message" name="msg" :qos="0" @payload="handlePayload"></mqtt>
                </div>
                <div>
                    <el-button type="primary" icon="el-icon-refresh" @click="loadData" class="btn-diy-circle" circle>
                    </el-button>
                    <el-button type="text" class="ml-0" @click="loadData">
                        刷新
                    </el-button>
                    <el-checkbox v-model="checked">自动刷新</el-checkbox>
                    <el-select v-model="refreshTime" style="width:80px" placeholder="请选择" @change="setINtervalTime">
                        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <!-- 作业进度,堆场,坏箱统计 -->
            <div class="control-flex control-bettwen mb-10">
                <!-- 作业进度 -->
                <div style="width:75%">
                    <span class="title-line">
                        作业进度监控
                    </span>
                    <!-- <el-form :inline="true" :model="workWatch" class="search-form" style="margin-top:10px" label-width="90px">
                        <el-row>
                            <el-col :span="14">
                                <el-form-item label="作业日期">
                                    <date-slot :startDate.sync="workWatch.search_GTE_jobTime" :endDate.sync="workWatch.search_LTE_jobTime"></date-slot>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" icon="el-icon-search" @click="getWorkCount">查 询</el-button>
                            </el-col>
                        </el-row>
                    </el-form> -->
                    <div class="control-flex mb-10 mt-10">
                        <div class="control-flex-algin">
                            <div class="control-bg-yzy bg-square"></div>
                            <div>已作业</div>
                        </div>
                        <div class="control-flex-algin">
                            <div class="control-bg-zyz bg-square"></div>
                            <div>作业中</div>
                        </div>
                        <div class="control-flex-algin">
                            <div class="control-bg-yfb bg-square"></div>
                            <div>已发布</div>
                        </div>
                        <div class="control-flex-algin">
                            <div class="control-bg-wzy bg-square"></div>
                            <div>未作业</div>
                        </div>
                        <div class="control-flex-algin">
                            <div class="control-bg-yfc bg-square"></div>
                            <div>已返场</div>
                        </div>
                        <div class="control-flex-algin">
                            <div class="control-bg-yyx bg-square"></div>
                            <div>已移箱</div>
                        </div>
                        <div class="control-flex-algin">
                            <div class="control-bg-no bg-square"></div>
                            <div>未录车皮</div>
                        </div>
                    </div>
                    <div>
                        <div class="control-flex mb-20" v-if="power('WJOB_CONTROL_CONTAINER_TRAINTX')">
                            <div style="width:120px;text-align:right;margin-right:10px;">装车控制</div>
                            <div class="control-flex control-bg">
                                <div @click="handleOpenWagonNo" style="border-top-left-radius: 12px;border-bottom-left-radius: 12px;width: 20%" class="control-bg-no">{{ zc.noWagonNo }}</div>
                                <div @click="handleOpen('zc','OPERATED',power('WJOB_CONTROL_CONTAINER_TRAINJC:RELEASE'),power('WJOB_CONTROL_CONTAINER_TRAINJC:VOID'))" style="width: 20%" class="control-bg-yzy">{{ zc.operated }}</div>
                                <div @click="handleOpen('zc','OPERATING',power('WJOB_CONTROL_CONTAINER_TRAINJC:RELEASE'),power('WJOB_CONTROL_CONTAINER_TRAINJC:VOID'))" style="width: 20%" class="control-bg-zyz">{{ zc.operating }}</div>
                                <div @click="handleOpen('zc','RELEASE',power('WJOB_CONTROL_CONTAINER_TRAINTX:RELEASE'),power('WJOB_CONTROL_CONTAINER_TRAINTX:VOID'))" style="width: 20%" class="control-bg-yfb">{{ zc.release }}</div>
                                <div @click="handleOpenZc('zc')" style="border-top-right-radius: 12px;border-bottom-right-radius: 12px;width: 20%" class="control-bg-wzy">{{ zc.nooperate }}</div>
                            </div>
                            <div style="width:40px">{{ zc.total}}</div>
                        </div>
                        <div class="control-flex mb-20" v-if="power('WJOB_CONTROL_CONTAINER_TRAINJC')">
                            <div style="width:120px;text-align:right;margin-right:10px;">卸车控制</div>
                            <div class="control-flex control-bg">
                                <div @click="handleOpen('xc','OPERATED',power('WJOB_CONTROL_CONTAINER_TRAINJC:RELEASE'),power('WJOB_CONTROL_CONTAINER_TRAINJC:VOID'))" style="border-top-left-radius: 12px;border-bottom-left-radius: 12px;width: 33.33%" class="control-bg-yzy">{{xc.operated}}</div>
                                <div @click="handleOpen('xc','RELEASE',power('WJOB_CONTROL_CONTAINER_TRAINJC:RELEASE'),power('WJOB_CONTROL_CONTAINER_TRAINJC:VOID'))" style="width: 33.33%" class="control-bg-yfb">{{xc.release}}</div>
                                <div @click="handleOpen('xc','NOOPERATE',power('WJOB_CONTROL_CONTAINER_TRAINJC:RELEASE'),power('WJOB_CONTROL_CONTAINER_TRAINJC:VOID'))" style="border-top-right-radius: 12px;border-bottom-right-radius: 12px;width: 33.33%" class="control-bg-wzy">{{xc.nooperate}}</div>
                            </div>
                            <div style="width:40px">{{ xc.total}}</div>
                        </div>
                        <div class="control-flex mb-20" v-if="power('WJOB_CONTROL_CONTAINER_CX')">
                            <div style="width:120px;text-align:right;margin-right:10px;">拆箱控制</div>
                            <div class="control-flex control-bg">
                                <div @click="handleOpen('cx','RETURNED',power('WJOB_CONTROL_CONTAINER_CX:RELEASE'),power('WJOB_CONTROL_CONTAINER_CX:VOID'))" style="border-top-left-radius: 12px;border-bottom-left-radius: 12px;width: 20%" class="control-bg-yfc">{{cx.returned}}</div>
                                <div @click="handleOpen('cx','OPERATED',power('WJOB_CONTROL_CONTAINER_CX:RELEASE'),power('WJOB_CONTROL_CONTAINER_CX:VOID'))" style="width: 20%" class="control-bg-yzy">{{cx.operated}}</div>
                                <div @click="handleOpen('cx','MOVED',power('WJOB_CONTROL_CONTAINER_CX:RELEASE'),power('WJOB_CONTROL_CONTAINER_CX:VOID'))" style="width: 20%" class="control-bg-yyx">{{ cx.moved }}</div>
                                <div @click="handleOpen('cx','RELEASE',power('WJOB_CONTROL_CONTAINER_CX:RELEASE'),power('WJOB_CONTROL_CONTAINER_CX:VOID'))" style="width: 20%" class="control-bg-yfb">{{ cx.release }}</div>
                                <div @click="handleOpen('cx','NOOPERATE',power('WJOB_CONTROL_CONTAINER_CX:RELEASE'),power('WJOB_CONTROL_CONTAINER_CX:VOID'))" style="border-top-right-radius: 12px;border-bottom-right-radius: 12px;width: 20%" class="control-bg-wzy">{{ cx.nooperate }}</div>
                            </div>
                            <div style="width:40px">{{ cx.total}}</div>
                        </div>
                        <div class="control-flex mb-20" v-if="power('WJOB_CONTROL_CONTAINER_NZCC')">
                            <div style="width:125px;text-align:right;margin-right:10px;">内转出场控制</div>
                            <div class="control-flex control-bg">
                                <div @click="handleOpen('nzcc','OPERATED',power('WJOB_CONTROL_CONTAINER_NZCC:RELEASE'),power('WJOB_CONTROL_CONTAINER_NZCC:VOID'))" style="border-top-left-radius: 12px;border-bottom-left-radius: 12px;width:25%" class="control-bg-yzy">{{nzcc.operated}}</div>
                                <div @click="handleOpen('nzcc','OPERATING',power('WJOB_CONTROL_CONTAINER_NZCC:RELEASE'),power('WJOB_CONTROL_CONTAINER_NZCC:VOID'))" style="width: 25%" class="control-bg-zyz">{{ nzcc.operating }}</div>
                                <div @click="handleOpen('nzcc','RELEASE',power('WJOB_CONTROL_CONTAINER_NZCC:RELEASE'),power('WJOB_CONTROL_CONTAINER_NZCC:VOID'))" style="width:25%" class="control-bg-yfb">{{nzcc.release}}</div>
                                <div @click="handleOpen('nzcc','NOOPERATE',power('WJOB_CONTROL_CONTAINER_NZCC:RELEASE'),power('WJOB_CONTROL_CONTAINER_NZCC:VOID'))" style="border-top-right-radius: 12px;border-bottom-right-radius: 12px;width:25%" class="control-bg-wzy">{{nzcc.nooperate}}</div>
                            </div>
                            <div style="width:40px">{{ nzcc.total}}</div>
                        </div>
                        <div class="control-flex mb-20" v-if="power('WJOB_CONTROL_CONTAINER_NZRC')">
                            <div style="width:125px;text-align:right;margin-right:10px;">内转入场控制</div>
                            <div class="control-flex control-bg">
                                <div @click="handleOpen('nzrc','OPERATED')" style="border-top-left-radius: 12px;border-bottom-left-radius: 12px;width: 33.33%" class="control-bg-yzy">{{nzrc.operated}}</div>
                                <div @click="handleOpen('nzrc','RELEASE')" style="width: 33.33%" class="control-bg-yfb">{{nzrc.release}}</div>
                                <div @click="handleOpen('nzrc','NOOPERATE')" style="border-top-right-radius: 12px;border-bottom-right-radius: 12px;width: 33.33%" class="control-bg-wzy">{{nzrc.nooperate}}</div>
                            </div>
                            <div style="width:40px">{{ nzrc.total}}</div>
                        </div>
                    </div>
                </div>
                <!-- 堆场,坏箱统计 -->
                <div style="width:210px">
                    <span class="title-line" v-if="power('WJOB_YARDPLAN_YARDMAP:QUERY')">
                        堆场监控
                    </span>
                    <div class="watch-bg-color" v-if="power('WJOB_YARDPLAN_YARDMAP:QUERY')">
                        <div class="watch-bg-flex">
                            <el-button type="primary" style="margin-left:0px" @click="handleWindowOpen({path:'/Work/yardMap',name:'堆场图'})">
                                堆 场 图
                            </el-button>
                            <div class="watch-bg-p">
                                <p>已放标箱位:{{ yardCount.usedTeu }}</p>
                                <p>可放标箱位:{{ yardCount.enabledTeu }}</p>
                                <p>布控标箱位:{{ yardCount.limitedTeu }}</p>
                            </div>
                        </div>
                    </div>
                    <span class="title-line" v-if="power('WJOB_CONTROL_CONTAINER_BAD')">
                        坏箱登记
                    </span>
                    <div class="watch-bg-color" v-if="power('WJOB_CONTROL_CONTAINER_BAD')">
                        <div class="watch-bg-flex">
                            <el-button type="primary" style="margin-left:0px" @click="handleWindowOpen({path:'/work/badBox',name:'坏箱登记'})">
                                坏箱登记
                            </el-button>
                            <div class="watch-bg-p">
                                <p>坏箱数量:{{ badBoxCount.count }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 未完结指令 -->
            <div v-if="power('WJOB_CONTROL_CONTAINER_COMMAND')">
                <span class="title-line">
                    未作业指令监控
                </span>
                <el-form :inline="true" :model="conditionUn" class="search-form mt-10" label-width="80px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="作业目的" clearable>
                                <!-- <auto-search-dic @selectName="v=>conditionUn['search_EQ_jobPurpose']=v" :name="conditionUn['search_EQ_jobPurpose']" code="COMMAND_ZYMD"></auto-search-dic> -->
                                <el-select v-model="conditionUn['search_EQ_jobPurpose']" placeholder="请选择" clearable>
                                    <el-option v-for="[key, val] in _dictJobPurpose" :key="key" :label="val" :value="key"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="箱号">
                                <el-input v-model="conditionUn['search_LIKE_containerNo']"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="目的场位">
                                <el-input v-model="conditionUn['search_LIKE_purposeField']"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="现机械" clearable>
                                <auto-search-machine :valid="true" :name="conditionUn['search_LIKE_presentMachine']" @selectName="v=>conditionUn['search_LIKE_presentMachine']=v"></auto-search-machine>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="目的机械">
                                <auto-search-machine :valid="true" :name="conditionUn['search_LIKE_purposeMachine']" @selectName="v=>conditionUn['search_LIKE_purposeMachine']=v"></auto-search-machine>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="作业状态">
                                <el-select v-model="conditionUn['search_EQ_status']" placeholder="请选择" clearable>
                                    <el-option v-for="[key, val] in _dictCommandStatus" :key="key" :label="val" :value="key"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-button @click="handleOption('void')" class="ml-80" v-if="power('WJOB_CONTROL_CONTAINER_COMMAND:VOID')">作 废</el-button>
                            <el-button @click="handleOption('')" v-if="power('WJOB_CONTROL_CONTAINER_COMMAND:ACTIVATE')">激 活</el-button>
                            <el-button @click="handleVoidForm" v-if="power('WJOB_CONTROL_CONTAINER_COMMAND:VOID')">作废记录</el-button>
                            <el-button type="primary" icon="el-icon-search" v-if="power('WJOB_CONTROL_CONTAINER_COMMAND:QUERY')" @click="getUnfinished">查 询</el-button>
                            <el-button @click="handleFinised">查看已作业指令 {{ finisheLength | finishe }}</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <mqtt ref="commands" destination="USERS/wzjzx/commands" name="zl" :qos="0" @connect-success="connectSuccess" @payload="handlePayloadDir"></mqtt>
                <el-alert title="" class="mt-10 alert-color" type="success" :closable="false">
                    <span>未作业总计：{{ unfinished.length }}</span>
                    <span class="ml-40" v-if="isConnect">正在实时接收指令</span>
                    <span class="ml-40" style="cursor: pointer" title="点击继续接收指令" v-if="!isConnect" @click="handleToConnect">已断开接收指令</span>
                </el-alert>
                <el-row class="mt-10">
                    <el-table :data="unfinished" border stripe max-height="500" :row-style="{'cursor': 'pointer'}" @selection-change="handleSelectionChange">
                        <el-table-column fixed="left" type="selection" prop="id" width="55"></el-table-column>
                        <el-table-column prop="status" label="作业状态"  min-width="120">
                            <template slot-scope="scope">
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.status | _filterCommandStatus }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="jobPurpose" label="作业目的"  min-width="120">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                {{ scope.row.jobPurpose | _filterJobPurpose }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="containerNo" label="箱号"  min-width="140">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.containerNo }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="containerSize" label="尺寸"  min-width="75">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.containerSize }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="containerType" label="箱型"  min-width="75">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.containerType }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                            <template slot-scope="scope">
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.ifHeavy | _filterIfHeavyType }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                            <template slot-scope="scope">
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.tradeType | _filterTradeType }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cargoName" label="货名"  min-width="75">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.cargoName }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="到/发站"  min-width="120">
                            <template slot-scope="scope">
                                <div @click="handleTableClickUn(scope.row)" v-if="scope.row.jobPurpose!=='TX'">
                                {{ scope.row.stratStationName || scope.row.endStationName }}
                                </div>
                                <div @click="handleTableClickUn(scope.row)" v-if="scope.row.jobPurpose==='TX'">
                                    {{ scope.row.endStationName || scope.row.stratStationName }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="presentField" label="现场位"  min-width="120">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.presentField }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="purposeField" label="目的场位"  min-width="160">
                            <template slot-scope='scope'>
                                <!--<div v-if="scope.row.presentField==='TR'&&scope.row.jobPurpose==='JC'">-->
                                    <table-input :value.sync="scope.row.purposeField" :item="scope.row"></table-input>
                                <!--</div>-->
                                <!--<div v-else>{{ scope.row.purposeField }}</div>-->
                                <!-- <span @click.stop="handleEditPur(scope.row)">{{ scope.row.purposeField }}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column prop="presentMachine" label="现机械"  min-width="120">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.presentMachine}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="purposeMachine" label="目的机械"  min-width="120">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.purposeMachine }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carNo" label="车号"  min-width="120">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.carNo }}
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="carNo" label="可放车位范围"  min-width="160"></el-table-column> -->
                        <el-table-column prop="releaseTime" label="发送时间"  min-width="160">
                            <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.releaseTime | time }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cargoWeight" label="货重"  min-width="75">
                             <template slot-scope='scope'>
                                <div @click="handleTableClickUn(scope.row)">
                                    {{ scope.row.cargoWeight }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>

            </div>
            <!-- 已完结指令 -->
            <!--<div v-if="power('WJOB_CONTROL_CONTAINER_COMMAND')">-->
            <div v-if="false">
                <span class="title-line mt-10 mb-10">
                    已完成指令监控
                </span>
                <el-alert title="" class="mt-10 alert-color" type="success" :closable="false">
                    <span>已完成总计：{{ finished.length }}</span>
                </el-alert>
                <el-table :data="finished" border stripe max-height="500" class="mt-10" :row-style="{'cursor': 'pointer'}" @row-click="handleTableClick">
                    <el-table-column prop="releaseTime" label="发布时间"  min-width="155"></el-table-column>
                    <el-table-column prop="endTime" label="作业时间"  min-width="155"></el-table-column>
                    <el-table-column prop="jobPurpose" label="作业目的"  min-width="110">
                        <template slot-scope='scope'>
                            {{ scope.row.jobPurpose | _filterJobPurpose }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="containerNo" label="箱号"  min-width="120"></el-table-column>
                    <el-table-column label="到/发站"  min-width="110">
                        <template slot-scope="scope">
                            {{ scope.row.stratStationName || scope.row.endStationName }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="presentField" label="现场位"  min-width="120"></el-table-column>
                    <el-table-column prop="purposeField" label="目的场位"  min-width="120"></el-table-column>
                    <el-table-column prop="presentMachine" label="现机械"  min-width="120"></el-table-column>
                    <el-table-column prop="purposeMachine" label="目的机械"  min-width="120"></el-table-column>
                    <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
                    <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
                    <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                        <template slot-scope="scope">
                            {{ scope.row.ifHeavy | _filterIfHeavyType }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                        <template slot-scope="scope">
                            {{ scope.row.tradeType | _filterTradeType }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="cargoName" label="货名"  min-width="75"></el-table-column>
                    <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
                </el-table>
            </div>
        </div>
        <warn-table ref="warnTable"></warn-table>
        <void-form ref="voidForm"></void-form>
        <no-wagon-no ref="noWagonNo"></no-wagon-no>
        <command-form ref="commandForm" :isFinished="isFinished" @load="loadCommand" @loadUn="loadCommand"></command-form>
        <work v-if="workTable" ref="work" @load="loadData"></work>
        <zc v-if="zcTable" ref="zc" @load="loadData"></zc>
        <finished ref="finished" @load="setFinished"></finished>
    </div>
</template>
<script>
import autoSearchDic from "@/components/autocomplete/autoSearchDic";
import machine from "./machine";
import warnTable from "./warnTable";
import {
    getWarnInfo,
    getYardCount,
    getUnfinishedCommand,
    getFinishedCommand,
    commandVoid,
    commandActivate,
    getCommad,
    getJobWatch,
    getBadBoxCount,
    commandPush,
    commandPushMsg
} from "@/api/middleControl/middleControl";
import autoSearchMachine from "@/components/autocomplete/autoSearchMachine";
import voidForm from "./voidForm";
import commandForm from "./commandForm";
import dateSlot from "@/components/date/dateSlot";
import tableInput from "@/components/input/tableInput";
import mqtt from "@/components/webSocket/mqtt";
import work from "./work";
import noWagonNo from './noWagonNo'
import zc from './zc';
import { getLocalTime } from "@/utils/dateFormat";
import finished from './finished'
export default {
    components: {
        machine,
        warnTable,
        autoSearchMachine,
        autoSearchDic,
        voidForm,
        commandForm,
        dateSlot,
        work,
        mqtt,
        zc,
        tableInput,
        noWagonNo,
        finished
    },
    data() {
        return {
            notice: [
                {
                    title: "暂无最新预警信息!!!"
                }
            ],
            newInfo: [
                {
                    title: "新信息!新信息!"
                },
                {
                    title: "旧信息!旧信息!"
                }
            ],
            timeOptions: [
                { value: 10000, label: "10s" },
                { value: 20000, label: "20s" }
            ],
            nzcc: {
                total: 6,
                operated:1,
                release:2,
                nooperate:3,
            },
            nzrc: {
                total: 6,
                operated:1,
                release:2,
                nooperate:3,
            },
            cx: {
                total: 15,
                returned:1,
                operating:2,
                moved:3,
                release:4,
                nooperate:5,
                operated:0,
            },
            xc: {
                total: 6,
                operated:1,
                release:2,
                nooperate:3,
            },
            zc: {
                operated: 1,
                operating: 2,
                release: 3,
                nooperate: 4,
                noWagonNo:0,
                total: 10
            },
            top: 120,
            workTable:false,
            zcTable:false,
            workWatch: {},
            checked: false,         // 默认应是 true
            newNum: 0, // 最新消息长度
            setInterval: null, // 定时器
            refreshTime: 10000, // 刷新时间
            warnList: [],
            yardCount: {},
            badBoxCount: {},
            unfinished: [], //未完结指令分页统计
            unfinishedSelect: [], // 未完结指令-选择
            conditionUn: {}, // 未完结指令分页条件
            finished: [], // 已完成指令分页统计
            condition: {}, // 已完成指令分页条件
            isFinished: false, // 区分是否指令是否完结;false-未完结;true-已完结
            isConnect:false,
            comeFirst:false,
            noWagonNo:false,
            isFirst:false,
            finisheLength:0,
        };
    },
    mounted() {
        this.loadData();
        // window.addEventListener("scroll", this.onScroll);
        this.setInterval = setInterval(() => {
            if (this.checked) {
                this.loadData();
            }
        }, this.refreshTime);
        console.log(this.$refs);
        this.$refs.msg.loadData().then(res => {
            this.$refs.commands.loadData().then(res=>{
                this.isConnect=true
            });
        });
        this.isFirst=true
        this.comeFirst=true
    },
    methods: {
        onScroll() {
            let scrolled =
                document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrolled);
            setTimeout(() => {
                this.top = scrolled + 120;
            }, 300);
        },
        loadData() {
            this.getYardCount(); // 堆场统计
            this.getUnfinished(); //未完结指令分页
            this.getWorkCount(); //作业进度监控-统计
            this.loadDataMachine();
            this.$nextTick(()=>{
                // commandPushMsg().then(res=>{})
            })
        },
        setINtervalTime() {
            clearInterval(this.setInterval);
            this.setInterval = setInterval(() => {
                if (this.checked) {
                    this.loadData();
                }
            }, this.refreshTime);
        },
        loadDataMachine() {
            this.$refs.machine.loadData();
        },
        loadCommand(){
            this.getWorkCount()
            this.getUnfinished()
        },
        // 机械监控-调用指令组件方法
        handleWatchDirective(data) {
            if(data.isVal){
                this.conditionUn['search_LIKE_presentMachine']=data.val
                this.conditionUn['search_LIKE_purposeMachine']=''
            }else{
                this.conditionUn['search_LIKE_presentMachine']=''
                this.conditionUn['search_LIKE_purposeMachine']=data.val
            }
            this.getUnfinished()
        },
        // 预警信息-提示信息获取
        getWarnInfo() {
            getWarnInfo().then(res => {
                let data = JSON.parse(JSON.stringify(res.data.aaData));
                this.notice = data.slice(0, 1);
                this.newInfo = data;
                this.getNotice();
            });
        },
        handlePayload(item) {
            console.log(item);
            this.notice.splice(0, this.notice.length);
            setTimeout(() => {
                this.notice.push({ title: item.message });
                console.log(this.notice);
            }, 0);
        },
        // 预警信息定时切换;默认10S
        getNotice() {
            this.setInterval = setInterval(() => {
                let info = this.newInfo;
                if (info.length > 0 && this.newNum < info.length - 1) {
                    this.newNum++;
                } else {
                    this.newNum = 0;
                }
                let num = this.newNum;
                this.notice.splice(0, 1);
                setTimeout(() => {
                    this.notice.splice(
                        this.notice.length,
                        0,
                        this.newInfo[num]
                    );
                }, 300);
            }, this.refreshTime);
        },
        // 预警信息记录列表
        getWarnInfoList() {
            this.$refs.warnTable.dialogForm = true;
            this.$refs.warnTable.loadData();
        },
        // 堆场监控-统计
        getYardCount() {
            getYardCount().then(res => {
                this.yardCount = res.data;
            });
            getBadBoxCount().then(res => {
                this.badBoxCount = res.data;
            });
        },
        getUnfinished() {
            this.handleSelectionChange([])
            let condition = this.$assist.copySearchConditions(this.conditionUn);
            console.log(JSON.stringify(condition))
            if (JSON.stringify(condition) == '{}') {
                this.getPush()
            } else {
                this.$refs.finished.condition = { ...condition }
                this.$refs.finished.loadData()
            }
        },
        getPush() {
            if (this.isFirst) {
                this.isFirst = false
                setTimeout(() => {
                    if (!this.comeFirst) {
                        this.comeFirst = true
                    }
                    commandPush().then(res => {
                        // if(!this.comeFirst){
                        //     this.comeFirst=true
                        // }
                    })
                }, 300)
            } else {
                setTimeout(() => {
                    if (!this.comeFirst) {
                        this.comeFirst = true
                    }
                    commandPush().then(res => {
                        // if(!this.comeFirst){
                        //     this.comeFirst=true
                        // }
                    })
                }, 1000)
            }
        },
        setFinished(val) {
            console.log(val)
            this.finisheLength=val
            this.getPush()
        },
        handleFinised(){
            let condition = this.$assist.copySearchConditions(this.conditionUn);
            this.$refs.finished.dialogForm=true
            this.$refs.finished.condition = { ...condition }
            this.$set(this.$refs.finished.condition, 'search_GTE_endTime', getLocalTime(new Date().getTime(), 'YYYY-MM-DD'))
            this.$set(this.$refs.finished.condition, 'search_LTE_endTime', getLocalTime(new Date().getTime(), 'YYYY-MM-DD'))
            // this.$refs.finished.condition.search_GTE_endTime = getLocalTime(new Date().getTime(), 'YYYY-MM-DD')
            // this.$refs.finished.condition.search_LTE_endTime = getLocalTime(new Date().getTime(), 'YYYY-MM-DD')
            this.$refs.finished.loadData()
        },
        getWorkCount() {
            let params = this.$assist.copySearchConditions(this.workWatch);
            getJobWatch(params).then(res => {
                const data = res.data.aaData[0];
                this.nzcc = data.nzcc;
                this.nzrc = data.nzrc;
                this.cx = data.cx;
                this.xc = data.xc;
                this.zc = data.zc;
            });
        },
        connectSuccess(){

        },
        handleToConnect(){
            this.isConnect=!this.isConnect
            if(this.isConnect){
                this.$refs.commands.loadData()
            }
        },
        // 未完结指令选择
        handleSelectionChange(val) {
            if(val.length>0){
                console.log('已选择')
                this.isConnect=false
                this.$refs.commands.disConnect()
            }else if(!this.isConnect){
                this.$refs.commands.loadData().then(res=>{
                    this.isConnect=true
                    this.comeFirst=true
                })
            }

            this.unfinishedSelect = JSON.parse(JSON.stringify(val));
        },
        handleOption(type) {
            if (this.unfinishedSelect.length === 0) {
                this.$message({ message: "请选择一条数据", type: "error" });
                return;
            }
            let data = [];
            for (let i = 0; i < this.unfinishedSelect.length; i++) {
                const element = this.unfinishedSelect[i];
                data.push({ id: element.id });
            }
            type === "void" ? this.handleVoid(data) : this.handleActivate(data);
        },
        // 未完结指令-作废
        handleVoid(data) {
            commandVoid(data).then(res => {
                this.$message({ message: "作废成功", type: "success" });
                this.getUnfinished();
                this.getWorkCount();
                this.handleSelectionChange([])
            });
        },
        // 未完结指令-激活
        handleActivate(data) {
            commandActivate(data).then(res => {
                this.$message({ message: "激活成功", type: "success" });
                this.getUnfinished();
                this.getWorkCount();
                this.handleSelectionChange([])
            });
        },
        // 查看作废记录
        handleVoidForm() {
            this.$refs.voidForm.dialogForm = true;
            setTimeout(() => {
                this.$refs.voidForm.loadData();
            }, 300);
        },
        handleWindowOpen(url) {
            // this.$router.push(url)
            this.$store.commit("ADD_CACHED_VIEWS", url);
            this.$router.push(url.path);
        },
        handleChangeEnd(val) {
            console.log(val);
            let setVal = val;
            if (val) {
                setVal = val.split(" ")[0] + " 23:59:59";
            }
            this.condition["search_LTE_jobTime"] = setVal;
        },
        // 修改目的场位或机械
        handleEditPur(item){
            console.log(item);
        },
        // 已作业指令表格弹窗
        handleTableClick(item) {
            this.isFinished = true;
            this.getCommandInfo(item.id);
        },
        // 未完成指令表格弹窗
        handleTableClickUn(item) {
            this.isFinished = false;
            this.getCommandInfo(item.id);
        },
        getCommandInfo(id) {
            getCommad(id).then(res => {
                this.$refs.commandForm.dialogForm = true;
                let data=[]
                for (let i = 0; i < res.data.aaData.length; i++) {
                    const el=res.data.aaData[i]
                    if(!el.purposeField||!el.presentMachine){
                        data.push({
                            ...el,
                            showInput:true
                        })
                    }else{
                        data.push({
                            ...el,
                            showInput:false
                        })
                    }
                }
                this.$refs.commandForm.command = data;
            });
        },
        handleOpen(name, type,zl=true,voids=true) {
            this.workTable=true
            this.$nextTick(()=>{
                this.$refs.work.dialogForm = true;
                this.$refs.work.name = name;
                this.$refs.work.zl = zl;
                this.$refs.work.voids = voids;
                this.$refs.work.condition['search_EQ_planStatus'] = type;
                this.$refs.work.status = type;
                this.$refs.work.loadData()
            })
        },
        handleOpenWagonNo(){
            this.noWagonNo=true
            this.$nextTick(()=>{
                this.$refs.noWagonNo.dialogForm=true
                this.$refs.noWagonNo.loadData()
            })
        },
        handlePayloadDir(item) {
            console.log(item);
            if (item.length === 0) {
                this.unfinished.splice(0, this.unfinished.length)
                return
            }
            if(this.comeFirst&&item.length>1){
                this.unfinished.splice(0,this.unfinished.length)
                this.unfinished.push(...item);
                this.comeFirst=false
            }else{
                let index = -1
                let lock = false
                for (let i = 0; i < this.unfinished.length; i++) {
                    if (this.unfinished[i].id === item[0].id && lock === false) {
                        index = i
                        lock = true
                    }
                }
                if (index > -1) {
                    if (item[0].status === 'NOOPERATE' || item[0].status === 'OPERATE') {
                        this.unfinished.splice(index, 1, item[0])
                    } else {
                        this.unfinished.splice(index, 1)
                    }
                } else {
                    if (item[0].status === 'NOOPERATE' || item[0].status === 'OPERATE') {
                        this.unfinished.push(item[0])
                    }
                }
            }

            const params=this.$assist.copySearchConditions(this.conditionUn);
            if(params.search_EQ_jobPurpose){
                this.unfinished=this.unfinished.filter(f=>{
                    return params.search_EQ_jobPurpose===f.jobPurpose
                })
            }
            if(params.search_LIKE_containerNo){
                this.unfinished=this.unfinished.filter(f=>{
                    return f.containerNo&&f.containerNo.indexOf(params.search_LIKE_containerNo)>-1
                })
            }
            if(params.search_LIKE_purposeField){
                this.unfinished=this.unfinished.filter(f=>{
                    return f.purposeField&&f.purposeField.indexOf(params.search_LIKE_purposeField)>-1
                })
            }
            if(params.search_LIKE_presentMachine){
                this.unfinished=this.unfinished.filter(f=>{
                    return f.presentMachine&&f.presentMachine.indexOf(params.search_LIKE_presentMachine)>-1
                })
            }
            if(params.search_LIKE_purposeMachine){
                this.unfinished=this.unfinished.filter(f=>{
                    return f.purposeMachine&&f.purposeMachine.indexOf(params.search_LIKE_purposeMachine)>-1
                })
            }
            if(params.search_EQ_status){
                this.unfinished=this.unfinished.filter(f=>{
                    return params.search_EQ_status===f.status
                })
            }
            this.unfinished=this.unfinished.filter(f=>{
                return f.visible === undefined || f.visible
            })
        },
        handleOpenZc(){
            this.zcTable=true
            this.$nextTick(()=>{
                this.$refs.zc.dialogForm=true
                this.$refs.zc.loadData()
            })
        }
    },
    computed: {
        startPickerOptions() {
            let endDate = this.condition["search_LTE_jobTime"];
            return {
                disabledDate(time) {
                    if (endDate) {
                        return time.getTime() > new Date(endDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        },
        endPickerOptions() {
            let startDate = this.condition["search_GTE_jobTime"];
            return {
                disabledDate(time) {
                    if (startDate) {
                        return time.getTime() < new Date(startDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        },
    },
    filters: {
        time(val){
            return getLocalTime(val,"YYYY-MM-DD hh:mm:ss")
        },
        finishe(num){
            if(num>0){
                return num + '条'
            }else{
                return null
            }
        }
    },
    destroyed() {
        clearInterval(this.setInterval);
    },
    deactivated(){
        clearInterval(this.setInterval);
    }
};
</script>


<style scoped>
.control-flex {
    display: flex;
    width: 100%;
}
.control-warp {
    flex-wrap: wrap;
    flex-direction: column;
}
.control-bettwen {
    justify-content: space-between;
}
.notice-list {
    display: inline-block;
    margin: 10px 0;
    width: 100%;
}
.alert-width {
    min-width: 500px;
}
.list-enter-active,
.list-leave-active {
    transition: all 1s;
}
.list-enter {
    opacity: 0;
    transform: translateY(30px);
}
.list-leave-to {
    opacity: 0;
    transform: translateY(-30px);
}
.btn-diy {
    padding: 5px 12px !important;
    margin-left: 10px;
}
.btn-diy-circle {
    padding: 5px;
}
.watch-bg-color {
    background: #f4f4f4;
    padding: 10px;
    margin: 10px 0;
}
.watch-bg-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.watch-bg-p {
    margin-left: 10px;
    width: 100px;
}
.watch-bg-p > p {
    margin: 12px 0;
}
.control-flex-algin {
    display: flex;
    align-items: center;
}
.control-bg {
    margin-right: 10px;
}
.control-bg > div {
    text-align: center;
    cursor: pointer;
    min-width: 20px;
}
.control-bg-no {
    background: mediumvioletred;
}
.control-bg-yzy {
    background: #70cb88;
}
.control-bg-zyz {
    background: #7699ff;
}
.control-bg-yfb {
    background: #2ba74c;
}
.control-bg-wzy {
    background: #dddddd;
}
.control-bg-yfc {
    background: #f3ae58;
}
.control-bg-yyx {
    background: #c2ea37;
}
.bg-square {
    width: 12px;
    height: 12px;
    margin-left: 25px;
    margin-right: 5px;
}
</style>
